<template>
  <div id="register">
    <el-row class="nav">
      <el-col :span="22">
        <div class="nav-item">
          <div @click="navClick('town')">
            <span :style="{ color: menuIndex == 'town' ? '#1F2D3D' : '#000000' }">乡镇注册</span>
            <span :style="{ background: menuIndex == 'town' ? '#1F2D3D' : 'none' }"></span>
          </div>
          <!-- <div @click="navClick('village')">
            <span :style="{ color: menuIndex == 'village' ? '#1F2D3D' : '#000000' }">乡村注册</span>
            <span :style="{ background: menuIndex == 'village' ? '#1F2D3D' : 'none' }"></span>
          </div> -->
        </div>
      </el-col>
      <el-col :span="2" style="display: flex;justify-content: flex-end;padding: 0 40px 0 0;">
        <el-button :loading="buttonState" @click="submit">{{ buttonState ? '正在注册中...' : '完成' }}</el-button>
      </el-col>
    </el-row>
    <el-form ref="townForm" :model="townForm" :rules="rules" v-show="menuIndex == 'town'">
      <el-row class="form-box">
        <el-col :span="24" class="form-item">
          <span></span>
          <span>基础信息</span>
        </el-col>
        <el-col :span="24" class="form-jjxx">
          <div>
            <span>乡镇地址</span>
            <span>
              <el-form-item label="" prop="address" style="width: 100%;">
                <el-cascader ref="townCascader" v-model="townForm.address" :props="townProp" />
              </el-form-item>
            </span>
          </div>
        </el-col>
      </el-row>
      <el-row class="form-box">
        <el-col :span="24" class="form-item">
          <span></span>
          <span>乡镇简介</span>
        </el-col>
        <el-col :span="24" class="form-xzjj">
          <el-form-item label="" prop="context">
            <el-input ref="townCntext" type="textarea" :rows="5" v-model="townForm.context" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="form-box">
        <el-col :span="24" class="form-item">
          <span></span>
          <span>上传图片</span>
        </el-col>
        <el-col :span="24" class="form-xzjj">
          <el-form-item label="" prop="image">
            <imageUpload v-model="townForm.image" @uploadImage="uploadimg" @remove="uploadimg" :limit="9" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form ref="villageForm" :model="villageForm" :rules="rules" v-show="menuIndex=='village'">
      <el-row class="form-box">
        <el-col :span="24" class="form-item">
          <span></span>
          <span>基础信息</span>
        </el-col>
        <el-col :span="24" class="form-jjxx">
          <div>
            <span>乡村地址</span>
            <span>
              <el-form-item label="" prop="address" style="width: 100%;">
                <el-cascader ref="villageCascader" v-model="villageForm.address" :props="villageProp" />
              </el-form-item>
            </span>
          </div>
        </el-col>
      </el-row>
      <el-row class="form-box">
        <el-col :span="24" class="form-item">
          <span></span>
          <span>乡村简介</span>
        </el-col>
        <el-col :span="24" class="form-xzjj">
          <el-form-item label="" prop="context">
            <el-input ref="villageCntext" type="textarea" :rows="5" v-model="villageForm.context" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="form-box">
        <el-col :span="24" class="form-item">
          <span></span>
          <span>上传图片</span>
        </el-col>
        <el-col :span="24" class="form-xzjj">
          <el-form-item label="" prop="image">
            <imageUpload v-model="villageForm.image" @uploadImage="uploadimg" @remove="uploadimg" :limit="9" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
  import axios from 'axios'
  import ImageUpload from "@/components/UploadImage";
  import { userRegister, getMgyArea } from "@/api/login"
  import Cookies from "js-cookie";
  import { encrypt, decrypt } from '@/utils/jsencrypt'
  export default {
    name: "register",
    components: {
      ImageUpload,
    },
    data() {
      let that = this;
      return {
        menuIndex: 'town',
        townForm: {
          name: "",
          address: "",
          context: "",
          image: "",
          number: 1
        },
        villageForm: {
          name: "",
          address: "",
          context: "",
          image: "",
          number: 0
        },
        rules: {
          address: [{ required: true, message: '请选择地址', trigger: 'blur' }],
        },
        townProp: {
          label: 'name',
          value: 'id',
          lazy: true,
          lazyLoad(node, resolve) {
            if (node.level == 4) {
              resolve([]);
              that.townForm.address = node.path;
            } else {
              getMgyArea({
                id: node.value || ''
              }).then(res => {
                resolve(res.data);
              })
            }
          }
        },
        villageProp: {
          label: 'name',
          value: 'id',
          lazy: true,
          lazyLoad(node, resolve) {
            if (node.level == 5) {
              resolve([]);
              that.villageForm.address = node.path;
            } else {
              getMgyArea({
                id: node.value || ''
              }).then(res => {
                resolve(res.data);
              })
            }
          }
        },

        buttonState: false
      }
    },
    created() {},
    mounted() {},
    methods: {
      /* 重置表单数据 */
      reset() {
        this.townForm = {
          name: "",
          address: "",
          context: "",
          image: "",
          number: 1
        };
        this.villageForm = {
          name: "",
          address: "",
          context: "",
          image: "",
          number: 2
        };
        //区分乡村乡镇后期还要区分省市 0 村 1 镇 2 县/区 3 市 4 省
        this.resetForm("townForm");
        this.resetForm("villageForm");
      },

      //头部点击事件
      navClick(type) {
        if (this.buttonState) {
          this.msgError("正在注册中,请勿操作");
        } else {
          this.menuIndex = type;
        };
      },
      //图片上传事件
      uploadimg(e) {
        this[this.menuIndex + 'Form'].image = e;
      },

      //完成按钮点击事件
      submit() {
        this.$refs[this.menuIndex + "Form"].validate(valid => {
          if (valid) {
            this.buttonState = true;
            let data = JSON.parse(JSON.stringify(this[this.menuIndex + "Form"]));
            let checkNodes = this.$refs[this.menuIndex + 'Cascader'].getCheckedNodes()[0]
            data.name = checkNodes.pathLabels[checkNodes.pathLabels.length - 1];
            data.address = checkNodes.pathLabels.join(',')
            userRegister(data).then(res => {
              const h = this.$createElement;
              this.$msgbox({
                title: res.msg,
                message: h('p', null, [
                  h('h2', null, `账号：${res.data.userName}`),
                  h('h2', null, `密码：${res.data.password}`),
                  h('h2', null, `请记住密码!!!`),
                ]),
                confirmButtonText: '立即登录',
                showCancelButton: true,
                cancelButtonText: '取消',
                // type: res.code === 200 ? 'success' : 'error',
                beforeClose: (action, instance, done) => {

                  if (action === 'confirm') {
                    Cookies.set("username", res.data.userName);
                    Cookies.set("password", encrypt(res.data.password));
                    this.$router.push("/login");

                  } else {
                    console.log('取消了');

                  };
                  this.buttonState = false;
                  done();

                },
              });

            }).catch(err => {
              this.buttonState = false;
            });
          };
        });
      },
    }
  }
</script>
<style lang="scss" scoped>
  #register {
    width: 100%;
    height: 100%;
    background: url("../assets/images/login.png");
    background-size: cover;
    overflow: hidden;

    .nav {
      width: 90%;
      height: 82px;
      margin: 6vh auto 3vh auto;
      background: #ffffff;


      .el-col {
        height: 100%;
        display: flex;
        align-items: center;

        .nav-item {
          display: flex;
          align-items: center;

          div {
            margin: 0 30px;
            display: flex;
            flex-direction: column;
            align-items: center;

            span {

              user-select: none;

              &:nth-of-type(1) {
                font-size: 16px;
                color: #000000;
                padding: 0 0 11px 0;
              }

              &:nth-of-type(2) {
                width: 39px;
                height: 2px;
              }

            }
          }
        }

        .el-button {
          border-radius: 10px;
          border: 1px solid #F1F2F4;
          font-size: 18px;
          color: #3e567d;
          font-weight: bold;
        }
      }
    }

    .form-box {
      width: 90%;
      padding: 20px 0;
      box-sizing: border-box;
      margin: auto;
      background: #ffffff;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      .form-item {
        display: flex;
        align-items: center;

        span {
          &:nth-of-type(1) {
            width: 5px;
            height: 18px;
            margin: 0 20px;
            background: #1F2D3D;
          }

          &:nth-of-type(2) {
            font-size: 16px;
            color: #000000;
          }
        }
      }

      .form-jjxx {

        width: 94.5%;
        margin: 2vh 0;
        border: 1px solid #707070;
        display: flex;

        div {
          &:nth-of-type(1) {
            width: 100%;
            display: flex;
            flex-direction: column;

            span {
              height: 49px;
              text-align: center;
              line-height: 49px;

              &:nth-of-type(1) {
                width: 100%;
                background: #BEBEBE;
              }

              &:nth-of-type(2) {
                ::v-deep .el-input--medium .el-input__inner {
                  width: 99.5%;
                  height: 49px;
                  line-height: 49px;
                  text-align: center;
                  border: none;
                }
              }
            }
          }

        }
      }

      .form-xzjj {
        width: 94.5%;
        margin: 2vh 0;
        border: none !important;

      }
    }
  }
</style>